<template>
  <el-form ref="formRef" :model="form" v-loading="loading">
    <pub-edit-description :ndColumns="2">
      <pub-edit-description-item :span="1" label="平台类型" required>
        <el-form-item prop="platform" :rules="$formRules.select">
          <pub-select-dict
            @change="changePlatform"
            v-model="form.platform"
            v-model:name="form.platformName"
            dict-code="SYS_PTLX"
            placeholder="请选择"
            width="100%"
          />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="模块名称" required>
        <el-form-item prop="moduleCode" :rules="$formRules.input">
          <el-select
            v-model="form.moduleCode"
            placeholder="请选择"
            @change="changeModule"
          >
            <el-option
              v-for="item in moduleOptions"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="子模块名称" required>
        <el-form-item prop="submoduleName" :rules="$formRules.input">
          <pub-input v-model="form.submoduleName" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="页面名称" required>
        <el-form-item prop="pageName" :rules="$formRules.input">
          <pub-input v-model="form.pageName" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="接口地址" required>
        <el-form-item prop="url" :rules="$formRules.input">
          <pub-input v-model="form.url" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="接口名称" required>
        <el-form-item prop="urlName" :rules="$formRules.input">
          <pub-input v-model="form.urlName" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="鉴权注解" required>
        <el-form-item prop="routingCode" :rules="$formRules.input">
          <pub-input v-model="form.routingCode" />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="排序" required>
        <el-form-item prop="sort" :rules="$formRules.input">
          <pub-input-number v-model="form.sort" :min="0"></pub-input-number>
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="2" label="备注">
        <el-form-item :rules="$formRules.input">
          <pub-textarea v-model="form.remark" />
        </el-form-item>
      </pub-edit-description-item>
    </pub-edit-description>
  </el-form>

  <div class="dialog-footer-btn">
    <el-button type="default" @click="emit('cancel')">取消</el-button>
    <el-button type="primary" @click="submit" v-prevent-repeat-click>保存</el-button>
  </div>
</template>
<script setup>
import {
  get_api_module,
  resource_routing_save,
  resource_routing_put,
  resource_routing_detail
} from '@/api/system'
const emit = defineEmits(['cancel', 'success'])
const props = defineProps({
  dialogId: {
    type: String,
    default: ''
  },
  copyId: {
    type: String,
    default: ''
  }
})
const form = ref({
  platform: ''
})
const loading = ref(false)
const moduleOptions = ref([])
const changePlatform = val => {
  form.value.moduleCode = ''
  getModule(val.code)
}
const changeModule = val => {
  form.value.moduleCode = val
  const target = moduleOptions.value.find(item => item.code === val)
  form.value.moduleName = target?.name
}
const getModule = async code => {
  const res = await get_api_module({ platform: code })
  moduleOptions.value = res.data
}
const formRef = ref(null)
const submit = async () => {
  formRef.value.validate(async valid => {
    if (valid) {
      loading.value = true
      let res = ( form.value.id)
        ? await resource_routing_put(form.value)
        : await resource_routing_save(form.value)
      if (res.succeed) {
        emit('success')
      }
      loading.value = false
    }
  })
}
const getDetail = async () => {
  let { data } = await resource_routing_detail(props.dialogId)
  form.value = data
}
const getCopy = async () => {
  let { data } = await resource_routing_detail(props.copyId)
  form.value = data
  form.value.id = null
}
onMounted(async () => {
  if (props.dialogId) {
    await getDetail()
    getModule(form.value.platform)
  }
  if(props.copyId){
    await getCopy()
    getModule(form.value.platform)
  }
})
</script>
<style lang="scss" scoped></style>
